/*
 * @Author: wangjq4214
 * @Date: 2022-05-03 23:27:17
 * @LastEditTime: 2022-05-07 18:55:22
 * @LastEditors: wangjq4214
 */
import { Card, Table, Link, Popconfirm, Badge } from '@arco-design/web-react';
import { ColumnProps } from '@arco-design/web-react/es/Table';
import { post } from '@/apis';
import { StorageListItem, STORAGE_DEL_URL } from '@/apis/storage';
import {
  listAtom,
  // nodeListAtom,
  paginationAtom,
  selectIDAtom,
  visibleAtom,
} from './model';
import ScaleModal from './components/scaleModal';

const useColumn = () => {
  const refetch = useSetAtom(listAtom);
  const setVisible = useSetAtom(visibleAtom);
  const setSelect = useSetAtom(selectIDAtom);

  const columns: ColumnProps<StorageListItem>[] = useMemo(() => {
    return [
      {
        title: '主节点',
        dataIndex: 'mainNode',
        render: (c: string) => {
          if (c === '') {
            return <Badge status="default" text="启动中" />;
          }

          return <Badge status="success" text={c} />;
        },
      },
      {
        title: '集群大小',
        dataIndex: 'size',
      },
      {
        title: '主节点内存',
        dataIndex: 'mainMemory',
      },
      {
        title: '从节点内存',
        dataIndex: 'slaveMemory',
        render: (c: number, record) => {
          if (record.type === 3) {
            return <>---</>;
          }

          return <>{c}</>;
        },
      },
      {
        title: '存储类型',
        dataIndex: 'type',
        render: (c: 1 | 2 | 3) => {
          const tmp = { 1: 'HDFS', 2: 'HBase', 3: 'MySQL' };
          return <>{tmp[c]}</>;
        },
      },
      {
        title: '创建时间',
        dataIndex: 'time',
        render: (c: string) => {
          if (c === '') {
            return <Badge status="default" text="启动中" />;
          }

          return <>{c}</>;
        },
      },
      {
        title: '操作',
        dataIndex: 'op',
        render: (col, record) => (
          <>
            <Link
              style={{ marginRight: '20px' }}
              onClick={() => {
                setSelect(record.id);
                setVisible(true);
              }}
            >
              缩扩容
            </Link>

            <Popconfirm
              title="你确定要删除这个集群吗？"
              onOk={() => {
                post(STORAGE_DEL_URL, { serviceID: record.id }).then(() => {
                  refetch();
                });
              }}
            >
              <Link status="error">删除</Link>
            </Popconfirm>
          </>
        ),
      },
    ];
  }, [refetch, setVisible, setSelect]);

  return { columns };
};

const QueryStorage = () => {
  const { data } = useAtomValue(listAtom);
  const refetch = useSetAtom(listAtom);
  // const refetchNodeList = useSetAtom(nodeListAtom);
  const [pagination, setPagination] = useAtom(paginationAtom);

  const { columns } = useColumn();

  useEffect(() => {
    refetch();
    // refetchNodeList();

    const timer = setInterval(() => {
      refetch();
    }, 3000);

    return () => {
      clearInterval(timer);
    };
  }, [refetch]);

  return (
    <>
      <Card title="存储集群列表">
        <div>
          <Table
            columns={columns}
            data={data?.item}
            border={false}
            rowKey={(item) => item.id}
            pagination={{
              total: data?.total,
              ...pagination,
              onChange: (idx, size) => {
                setPagination(() => ({ pageSize: size, current: idx }));
              },
            }}
          />
        </div>
      </Card>

      <ScaleModal />
    </>
  );
};

export default QueryStorage;
